<template>
	<view class="page">
		<view class="order-info">
			<view class="order-title">订单信息</view>
			<view class="order-form">
				<u--form labelPosition="left" :model="model" ref="form">
					<u-form-item labelWidth="80" label="联系人" prop="name" borderBottom ref="item">
						<u--input v-model="model.name" border="none" placeholder="（必选）请填写姓名"></u--input>
						<!-- <u-icon slot="right" @click="toShowUinfo()" name="list-dot">111</u-icon> -->
						<u-button slot="right" shape="circle" @click="toShowUinfo()" color="#ac4040" size="small"
							icon="list-dot" iconColor="#ffffff">常用信息</u-button>
					</u-form-item>

					<u-form-item labelWidth="80" label="手机号" prop="phone" borderBottom ref="item">
						<u--input v-model="model.phone" border="none" placeholder="（必选）请填写手机号">
						</u--input>

						<u-button slot="right" shape="circle" openType="getPhoneNumber" @getphonenumber="getPhoneNumber"
							color="#ac4040" size="small" icon="phone" iconColor="#ffffff">获取手机号</u-button>
						<!-- 
						<u-icon slot="right" @click="toShowUinfo()" name="arrow-right"></u-icon> -->
					</u-form-item>

					<u-form-item labelWidth="80" label="身份证" prop="idCard" borderBottom ref="item">
						<u--input v-model="model.idCard" border="none" placeholder="（必选）请填写身份证号">
						</u--input>
					</u-form-item>

					<u-form-item labelWidth="80" label="血型" prop="blood" borderBottom ref="item">
						<u-radio-group v-model="model.blood">
							<u-radio activeColor="#ac4040" :customStyle="{marginRight: '10px'}"
								v-for="(item, index) in blood" :key="index" :label="item.text" :name="item.value">
							</u-radio>
						</u-radio-group>
					</u-form-item>

					<u-form-item labelWidth="80" label="紧急联系人" prop="contacts" borderBottom ref="item">
						<u--input v-model="model.contacts" border="none" placeholder="家人/朋友手机号">
						</u--input>
					</u-form-item>

					<u-form-item labelWidth="80" label="预约地址" prop="address" borderBottom ref="item">
						<u--input v-model="model.address" border="none" placeholder="预约地址"></u--input>
					</u-form-item>

					<u-form-item @click="showCalendar = true; hideKeyboard()" labelWidth="80" label="预约日期"
						prop="userInfo.address" borderBottom ref="item">
						<u--input v-model="model.appointTime" disabled disabledColor="#ffffff" placeholder="（必选）请选择预约时间"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>

					<u-form-item labelWidth="80" label="购买数量" prop="orderNum" borderBottom ref="item">
						<view slot="right">
							<u-number-box @change="onChange()" v-model="model.orderNum" :min="1" :max="100">
							</u-number-box>
						</view>
					</u-form-item>


				</u--form>

			</view>
		</view>

		<view class="insurance" v-if="actInfo.insuranceId">
			<view style="width: 50%;">
				<text>保险</text>
				<text style="font-size: 18rpx;color: #909399;">（必选）为他人购买保险请到前台</text>
			</view>
			<view style="display: flex;justify-content: flex-end;width: 50%;">
				<view>
					<text style="color:#ac4040 ;margin-right: 40rpx;">{{actInfo.insuranceName}}</text>
				</view>
				<view>
					<text style="color:#ac4040 ;">+￥{{actInfo.insurancePrice}}</text>
				</view>
				<view style="display: flex;align-items: center;">
					<u-checkbox-group>
						<u-checkbox @change="change" labelSize="14" size="16" activeColor="#ac4040" shape="circle"
							:customStyle="{marginLeft: '10px'}">
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</view>

		<view class="card" v-if="actInfo.needPay" @click="toshowcard()">
			<view style="width: 50%;">
				<text>我的卡券</text>
			</view>
			<view style="width: 50%;display: flex;justify-content: flex-end;">
				<text style="color:#ac4040;margin-right: 10rpx;">-￥{{money}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<u-popup :safeAreaInsetBottom="true" :safeAreaInsetTop="false" mode="bottom" :show="showcard" round="10"
			:overlay="true" borderRadius="2" :closeable="false" :closeOnClickOverlay="true" @close="closecard">
			<view style="font-size: 35rpx;line-height: 66rpx;margin-left: 20rpx;font-weight: 500;margin-top: 10rpx;">优惠券
			</view>
			<view style="font-size: 30rpx;line-height: 66rpx;margin-left: 20rpx;">
				{{money ? '您已选中优惠券一张，共可抵用' : '请选择优惠券' }}
				<text style="color: red;" v-if="money">¥{{money}}</text>
				<text v-if="money">元</text>
			</view>
			<view class="card-popup-slot">
				<view class="coupon-list">
					<view class="list" :class="[actindex===index? 'active':'']" v-for="(item,index) in couponList"
						:key="index" @click="changeTab(index,item)">
						<view class="list-data">
							<view class="coupon-price">
								<view class="discounts">
									<text class="min">￥</text>
									<text class="max">{{item.money}}</text>
								</view>
								<view class="full-reduction"><text>{{item.ruleRemark}}</text></view>
								<view class="jag"></view>
							</view>
							<view class="coupon-info">
								<view class="info-title">
									<view class="title"><text>{{item.title}}</text></view>
								</view>
								<view class="coupon-way">仅小程序使用</view>
								<view class="date-get">
									<view class="date"><text>{{item.startDay}}-{{item.endDay}}</text></view>
								</view>
							</view>
						</view>
						<view
							style="margin: 0 20rpx;font-size: 20rpx;padding: 10rpx;background-color: #ffffff;color: #909399;border-radius: 8rpx ;"
							v-if="current==index">
							<view>
								<view>使用方式：{{item.ruleRemark}}</view>
								<view>使用范围：仅{{item.shopName}}使用</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</u-popup>


		<u-popup bgColor="#F7F7F7" :safeAreaInsetBottom="false" :safeAreaInsetTop="false" mode="bottom"
			:show="showUinfo" round="10" :overlay="true" borderRadius="2" :closeable="true" :closeOnClickOverlay="true"
			@close="closeUinfo">
			<view class="Uinfo-popup-slot">
				<view class="Uinfo-group" :class="[infoindex===index? 'active':'']" @click="uinfo(item,index)"
					v-for="(item,index) in tempList" :key="index">
					<view class="Uinfo-detail">
						<view style="color: #000; font-size: 30rpx;">
							{{item.name}}
						</view>
						<view style="margin: 8rpx 0;">
							<text>身份证：</text>
							<text>{{item.idCard.replace(/^(.{6})(?:\d+)(.{4})$/,"$1****$2")}} </text>
						</view>
						<view style="margin: 8rpx 0;">
							<text>手机号：</text>
							<text>{{item.phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}</text>
						</view>
					</view>
					<view class="Uinfo-opt">
						<u-icon name="arrow-right"></u-icon>
					</view>


				</view>

			</view>

		</u-popup>


		<u-keyboard tips="新动力安全键盘" :mode="keyData.mode" :dotDisabled="keyData.dotDisabled" :random='keyData.random'
			:show="keyshow" @close="keyclose" @cancel="keycancel" @confirm="keyconfirm" @change="keychange"
			@backspace="keybackspace"></u-keyboard>

		<u-calendar showLunar :show="showCalendar" :minDate="startDay" :maxDate="endDay" @confirm="confirm"
			@close="close" color="#ac4040" :defaultDate="customThemeDefaultDate"></u-calendar>

		<view class="order-bottom">
			<view class="order-price">
				<view v-if="actInfo.needPay">
					<view>
						<text>￥{{actInfo.price}}</text>
					</view>
					<view class="order-coupon">
						<text>已优惠：￥</text>
						<text>{{money}}</text>
					</view>
				</view>
			</view>

			<view @click="subOrder()" class="order-btn">{{actInfo.needPay ? "提交订单":"立即预约"}}</view>

		</view>



	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	export default {
		data() {
			const d = new Date()
			const year = d.getFullYear()
			let month = d.getMonth() + 1
			month = month < 10 ? `0${month}` : month
			const date = d.getDate()
			return {
				keyData: {
					mode: '',
					dotDisabled: false,
					random: false,
					id: ''
				},
				keyshow: false,
				startDay: "",
				endDay: "",
				actInfo: {},
				tempList: [],
				numPice: 0,
				nowPice: 0,
				showUinfo: false,
				current: null,
				isDisabled: false,
				money: 0,
				actindex: -1,
				infoindex: -1,
				showcard: false,
				showCalendar: false,
				customThemeDefaultDate: `${year}-${month}-${date}`,
				couponList: [],
				couponId: -1,
				blood: [{
						text: 'A型',
						value: 1
					},
					{
						text: 'B型',
						value: 2
					},
					{
						text: 'AB型',
						value: 3
					},
					{
						text: 'O型',
						value: 4
					}
				],
				model: {
					phone: "",
					idCard: "",
					contacts: ""
				}
			}
		},
		onReady() {

		},
		onLoad() {
			this.actInfo = utils.getCacheSync('actInfo');
			let isnow = this.actInfo.startDay.trim() < this.dateFormat(new Date());
			if (isnow) {
				this.startDay = this.dateFormat(new Date());
			} else {
				this.startDay = this.actInfo.startDay;
			}
			this.endDay = this.actInfo.endDay;
			this.model.address = this.actInfo.address;
			this.nowPice=this.actInfo.price;
			this.onLoadCoupon();
			this.loadUserTemp();
		},
		methods: {
			onChange(e) {
				let xs = e.value - 1
				this.actInfo.price = this.actInfo.price - this.numPice;
				this.numPice = 0;
				this.numPice = this.nowPice * xs;
				this.actInfo.price = this.actInfo.price + this.numPice
			},
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				// return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				return year + "-" + month + "-" + day;
			},
			loadUserTemp() {
				this.$Request.get(this.$api.user.getUserTemp).then(res => {
					if (res.code == 20000) {
						this.tempList = res.data;
					}
				})

			},
			uinfo(v, i) {
				this.model = v;
				this.model.address = this.actInfo.address;
				this.infoindex = i;
			},
			cchange() {
				this.keyshow = true;
				this.keyData.mode = 'number';
				this.keyData.dotDisabled = true;
				this.keyData.random = true;
				this.keyData.id = 'contacts'
			},
			idchange() {
				this.keyshow = true;
				this.keyData.mode = 'card'
				this.keyData.id = 'idcard'
			},
			phonechange() {
				this.keyshow = true;
				this.keyData.mode = 'number';
				this.keyData.dotDisabled = true;
				this.keyData.random = true;
				this.keyData.id = 'phone'
			},
			keychange(e) {
				if (this.keyData.id == 'idcard') {
					this.model.idCard += e
				} else if (this.keyData.id == 'phone') {
					this.model.phone += e
				} else if (this.keyData.id == 'contacts') {
					this.model.contacts += e
				}

			},
			keyclose() {
				// console.log('close');
				this.keyshow = false
			},
			keycancel() {
				// console.log('cancel');
				this.keyshow = false
			},
			keyconfirm() {
				// console.log('confirm');
				this.keyshow = false
			},
			keybackspace() {
				if (this.keyData.id == 'idcard') {
					this.model.idCard = this.model.idCard.slice(0, -1);
				} else if (this.keyData.id == 'phone') {
					this.model.phone = this.model.phone.slice(0, -1);
				} else if (this.keyData.id == 'contacts') {
					this.model.contacts = this.model.contacts.slice(0, -1);
				}

			},
			getPhoneNumber(e) {
				uni.login({
					success: (res) => {
						console.log("login", JSON.stringify(res));
						const params = {
							"code": res.code,
							"iv": e.detail.iv,
							"encryptedData": e.detail.encryptedData
						}
						this.$Request.post(this.$api.user.getPhoneNumber, params).then(
							res => {
								if (res.code == 20000) {
									uni.$u.toast("获取成功");
									this.model.phone = res.data.phoneNumber;
								} else {
									uni.$u.toast("获取失败，请重新尝试");
								}
							})


					}
				})

			},
			/* 切换 */
			changeTab(i, v) {
				if (this.actindex == i) {
					this.actindex = -1;
					this.money = 0;
					this.actInfo.price = this.actInfo.price + v.money;
					this.couponId = -1;
				} else {
					this.actindex = i;
					this.money = v.money;
					this.actInfo.price = this.nowPice - v.money;
					this.couponId = v.id;
				}

			},
			isDes(i) {
				if (this.current == i) {
					this.current = null;
				} else {
					this.current = i;
				}
			},
			onLoadCoupon() {
				const actInfo = utils.getCacheSync('actInfo');
				const params = {
					rule: actInfo.price,
					status: 1,
					pageNo: 1,
					pageSize: 10
				}
				this.$Request.post(this.$api.coupon.getMyCoupon, params).then(res => {
					if (res.code === 20000 && res.data != null) {
						this.couponList = [...this.couponList, ...res.data];
					}
				})

			},
			toshowcard() {
				this.showcard = true;
			},
			closecard() {
				this.showcard = false;
			},
			toShowUinfo() {
				this.showUinfo = true;
			},
			closeUinfo() {
				this.showUinfo = false;
			},
			async subOrder() {
				this.model.price = this.actInfo.price;
				this.model.couponId = this.couponId;
				this.model.actId = this.actInfo.id;
				
				if(!this.model.name){
					uni.showToast({
						icon: 'error',
						position: 'bottom',
						title: '请输入姓名'
					});
					return false;
				}
				
				if(!this.model.phone){
					uni.showToast({
						icon: 'error',
						position: 'bottom',
						title: '请填写手机号'
					});
					return false;
				}
				
				if(!this.model.appointTime){
					uni.showToast({
						icon: 'error',
						position: 'bottom',
						title: '请选择预约日期'
					});
					return false;
				}
				
				if (this.actInfo.insuranceId && !this.model.insurance) {
					uni.showToast({
						icon: 'error',
						position: 'bottom',
						title: '请订购保险'
					});
					return false;
				}
				
				this.$Request.post(this.$api.order.order, this.model).then(res => {
					if (res.code === 20000 && res.data != null) {
						if (this.actInfo.needPay) {
							uni.requestPayment({
								...res.data.payInfo,
								success: (res) => {
									uni.showToast({
										title: "下单成功!"
									})
									uni.reLaunch({
										url: '/pages/index/index',
									});
								},
								fail: (res) => {
									uni.showModal({
										content: "支付已取消",
										showCancel: false
									})
									uni.reLaunch({
										url: '/pages/my/index',
									});
								},
								complete: () => {
									this.loading = false;
								}
							})
						} else {
							uni.showModal({
								content: "活动已预约",
								showCancel: false
							})
							uni.reLaunch({
								url: '/pages/my/index',
							});
						}
					}
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			change(e) {
				console.log('e>>', e)
				this.model.insurance = e;
				if (this.model.insurance) {
					this.actInfo.price = this.actInfo.price + this.actInfo.insurancePrice;
				} else {
					this.actInfo.price = this.actInfo.price - this.actInfo.insurancePrice;
				}
			},
			confirm(e) {
				console.log(e);
				this.showCalendar = false
				this.model.appointTime = e[0]
			},
			close() {
				this.showCalendar = false
			}
		}
	}
</script>

<style lang="scss">
	/* 优惠券 */
	.coupon-list {
		padding: 20rpx 4%;
		margin: -20rpx auto 0;

		.list {
			position: relative;
			width: 100%;
			min-height: 200rpx;
			box-shadow: 0 0 14rpx rgba(0, 0, 0, 0.1);
			border-radius: 6rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.list-data {
				display: flex;
				align-items: center;
				width: 100%;
				height: 200rpx;

				.coupon-price {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 30%;
					height: 100%;
					background-color: $xdl-color-primary;

					.discounts {
						display: flex;
						justify-content: center;
						align-items: flex-end;
						width: 100%;

						.min {
							color: #ffffff;
							font-size: 32rpx;
							font-weight: bold;
						}

						.max {
							font-size: 48rpx;
							color: #ffffff;
							font-weight: bold;
						}
					}

					.full-reduction {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						margin: 20rpx 0 -20rpx 0;

						text {
							font-size: 24rpx;
							color: #ffffff;
							font-weight: bold;
							text-align: center;
							width: 100%;
						}
					}

					.jag {
						position: absolute;
						top: 0;
						left: -6rpx;
						width: 6px;
						height: 100%;
						background-size: 10px 6px;
						background-color: #fff;
						background-position: 100% 35%;
						background-image: linear-gradient(-45deg, $xdl-color-primary 25%, transparent 25%, transparent), linear-gradient(-135deg, $xdl-color-primary 25%, transparent 25%, transparent),
							linear-gradient(-45deg, transparent 75%, $xdl-color-primary 75%), linear-gradient(-135deg, transparent 75%, $xdl-color-primary 75%);
					}
				}

				.coupon-info {
					width: 70%;
					height: 90%;
					padding: 0 4%;

					.coupon-way {
						color: $xdl-color-primary;
						display: flex;
						margin: 0 0 10rpx 0;
						font-size: 24rpx;
						font-weight: 500;
						border-radius: 14rpx;
						width: 170rpx;
						justify-content: center;
						border: 1rpx solid $xdl-color-primary;
					}

					.info-title {
						display: flex;
						width: 100%;
						height: 60rpx;

						.tag {
							margin-right: 10rpx;

							text {
								padding: 4rpx 16rpx;
								color: #ffffff;
								background-color: $xdl-color-primary;
								font-size: 24rpx;
								border-radius: 40rpx;
							}
						}

						.title {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 430rpx;

							text {
								font-size: 32rpx;
								font-weight: bold;
							}
						}
					}

					.date-get {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;
						height: 70rpx;
						//border-bottom: 2rpx dashed #eeeeee;

						.date {
							display: flex;
							align-items: center;

							text {
								font-size: 24rpx;
								color: #555555;
							}
						}

					}

					.describe-title {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;
						height: 40rpx;

						text {
							color: #555555;
							font-size: 24rpx;
						}

						.more {
							transform: rotate(90deg);
						}
					}
				}
			}

			.describe {
				display: flex;
				align-items: center;
				padding: 0 4%;
				height: 60rpx;
				background-color: #FFFFFF;
				box-shadow: 0 -10rpx 10rpx #F5F5F5;

				text {
					color: #CCCCCC;
					font-size: 24rpx;
				}
			}

			&.active {
				background-color: #ffffff;
				border: $xdl-color-primary solid 1px;

				&::before {
					content: '';
					display: block;
					width: 20px;
					height: 20px;
					background-color: $xdl-color-primary;
					position: absolute;
					right: -1px;
					bottom: -1px;
					z-index: 1;
					clip-path: polygon(100% 0, 0% 100%, 100% 100%);
				}

				&::after {
					content: '';
					display: block;
					width: 3px;
					height: 6px;
					border-right: #fff solid 2px;
					border-bottom: #fff solid 2px;
					transform: rotate(25deg);
					position: absolute;
					right: 3px;
					bottom: 3px;
					z-index: 2;
				}
			}
		}
	}

	.get {
		text {
			padding: 5rpx 20rpx;
			//margin-left: 40rpx;
			text-align: center;
			width: 120rpx;
			font-size: 25rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			font-weight: 800;
			color: $xdl-color-primary;
		}
	}

	.coupon-detail {
		font-size: 20rpx;
		color: #909399;
		margin-top: 10rpx;

		.coupon-jt {
			display: inline-block;
			transition: all .3s;
			font-weight: bold;
			font-size: 18rpx;
			margin-left: 10rpx;
		}

		.coupon-jt.on {
			transform: rotate(180deg);
			font-weight: bold;
		}

	}

	.Uinfo-popup-slot {
		background-color: #F7F7F7;
		height: 700rpx;
		width: 100%;
		margin-top: 50rpx;

		.Uinfo-group {
			background-color: #ffffff;
			margin: 20rpx 20rpx;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			display: flex;
			position: relative;

			.Uinfo-detail {
				width: 50%;
				font-size: 24rpx;
				color: #909399;
			}

			&.active {
				background-color: #ffffff;
				border: $xdl-color-primary solid 1px;

				&::before {
					content: '';
					display: block;
					width: 20px;
					height: 20px;
					background-color: $xdl-color-primary;
					position: absolute;
					right: -1px;
					bottom: -1px;
					z-index: 1;
					clip-path: polygon(100% 0, 0% 100%, 100% 100%);
				}

				&::after {
					content: '';
					display: block;
					width: 3px;
					height: 6px;
					border-right: #fff solid 2px;
					border-bottom: #fff solid 2px;
					transform: rotate(25deg);
					position: absolute;
					right: 3px;
					bottom: 3px;
					z-index: 2;
				}
			}

			.Uinfo-opt {
				width: 50%;
				display: flex;
				align-content: center;
				justify-content: flex-end;
			}
		}

	}


	.card-popup-slot {
		//background-color: #F7F7F7;
		height: 700rpx;
		width: 100%;
		margin-top: 40rpx;
	}

	.card-group {
		.card-item {
			height: 200rpx;
			margin: 0 20rpx;
			background-image: url('https://beluga-s3.oss-cn-hangzhou.aliyuncs.com/xdl-bucket/card-bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.card-info {
				display: flex;
				padding: 20rpx;
				width: 100%;

				.coupon-info {
					width: 68%;

					.coupon-title {
						font-size: 32rpx;
						font-weight: bold;
					}

					.coupon-way {
						color: $xdl-color-primary;
						display: flex;
						margin: 10rpx 0 10rpx 20rpx;
						font-size: 24rpx;
						font-weight: 500;
						border-radius: 14rpx;
						width: 170rpx;
						justify-content: center;
						border: 1rpx solid $xdl-color-primary;
					}

					.coupon-time {
						margin-top: 20rpx;
						font-size: 20rpx;
						margin-left: 20rpx;
					}

					.coupon-detail {
						font-size: 20rpx;
						color: #909399;
						margin-left: 20rpx;
						margin-top: 10rpx;

						.coupon-jt {
							display: inline-block;
							transition: all .3s;
							font-weight: bold;
							font-size: 18rpx;
							margin-left: 10rpx;
						}

						.coupon-jt.on {
							transform: rotate(180deg);
							font-weight: bold;
						}

					}
				}

				.coupon-use {
					color: #ffffff;
					width: 32%;

					.coupon-money {
						margin-left: 30rpx;

						text {
							font-size: 30rpx;
							margin: 0 5rpx;
						}

						font-weight: bold;
						font-size: 70rpx;


					}

					.coupon-btn {
						margin-left: 40rpx;
						text-align: center;
						width: 120rpx;
						font-size: 25rpx;
						border-radius: 20rpx;
						background-color: #ffffff;
						font-weight: 800;
						color: $xdl-color-primary;
					}

					.coupon-rule {
						font-size: 20rpx;
						font-weight: bold;
						margin: 19rpx 60rpx;
					}
				}

			}
		}
	}

	.order-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		padding: 20rpx 30rpx;

		.order-price {
			width: 40%;
			align-items: center;
			font-size: 40rpx;
			color: $xdl-color-primary;
			font-weight: bold;

			.order-coupon {
				font-size: 20rpx;
				margin-left: 10rpx;
				color: #909399;
			}
		}

		.order-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 60%;
			color: #ffffff;
			background-color: $xdl-color-primary;
			width: 400rpx;
			height: 80rpx;
			border-radius: 40rpx;
		}
	}


	.insurance {
		margin: 0 20rpx;
		background-color: #ffffff;
		padding: 20rpx;
		font-size: 28rpx;
		display: flex;
		border-radius: 10rpx;
	}

	.card {
		margin: 20rpx 20rpx;
		background-color: #ffffff;
		padding: 20rpx;
		font-size: 28rpx;
		display: flex;
		border-radius: 10rpx;

	}


	.order-info {
		margin: 20rpx 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 20rpx;

		.order-title {
			font-size: 30rpx;
			font-weight: bold;
		}

		.order-form {
			font-size: 24rpx;
		}
	}
</style>
